<template>
	<section class="area_area_gai_shu">
		    <div class="area_area_gai_shu_first">
				<el-row :gutter="10">
				  <el-col :span="12">
				  	<div class="tup_pu_pic">
							<p><span class="p_tuopu"><span class="blue"></span>网络拓扑图</span><span class="green show_span"></span>正常<span class="red show_span"></span>异常</p>
							<div class="show_data">
								<img class="tuo_pu_zhuji" src="../../../images/areaRecource/areaRecource01_02.png"/>
								<p class="manage_center">管理中心/公安网</p>
								<el-carousel  @change="changeTopu" height="150px" :autoplay=false  trigger="click" indicator-position="none" style="width: 80%;margin: 80px auto;">
								    <el-carousel-item v-for="(item,index) in arae_topu_length" :key="index">
										<el-row :gutter="20">
											 <el-col :span="6"  v-for="(tuopuItemItem,tuopuIndexIndex) in tuopuItem">
											 	<div  class="toupu_item" >
											 		<p class="item_name">{{tuopuItemItem.name}}</p>
												 	<p class="tongdao_item" v-for="(tongdaoItem,tongdaoIndex) in tuopuItemItem.smAreaList">
												 		<span>{{tongdaoItem.name}}</span>
												 		<img v-if="tongdaoItem.status===1" src="../../../images/areaRecource/areaRecource01_03.png"/>
												 		<img v-if="tongdaoItem.status!=1" src="../../../images/areaRecource/areaRecource01_04.png"/>
												 	</p>
											 	</div>
											 	
											  </el-col>
										</el-row>
								    </el-carousel-item>
								</el-carousel>
							</div>
				  	</div>
				  </el-col>
				  <el-col :span="12">
				  	<div class="all_gaishu">
				  		<p><span class="p_tuopu"><span class="blue"></span>总体概述</span></p>
				  		<div class="all_gaishu_content" style="margin-top: 45px;">
				  			<div class="all_gaishu_item"  v-for="(item,index) in allGaishu">
				  				<p class="all_gaishu_item_num">{{item.num}}</p>
				  				<p class="all_gaishu_item_name">{{item.name}}</p>
				  			</div>
				  		</div>
				  	</div>
				  </el-col>
				</el-row>
    </div>
		
	
    	<!--区域概述-->
	<div class="area_about_bottom">
		<p><span class="p_tuopu"><span class="blue"></span>区域概述</span></p>
			<el-carousel @change="changeCarousel" :autoplay=false  trigger="click" indicator-position="none" class="area_bottom_carousel_content">
					<el-carousel-item v-for="(item,index) in area_about_bottom_length" class="area_bottom_carousel" :key="index" style="width: 90%;margin: 0 auto;">
						<div  class="areaAbout_contenc"  @click="pushDetail(areaAboutItem)" v-for="(areaAboutItem,areaAboutIndex) in areaAboutBottom">
							<div class="areaAbout_item">
								<p class="areaAbout_item_name">{{areaAboutItem.name}}</p>
								<ul>
									<li class="area_bottom_item_li" >
											<p >
												<span class="areaAbout_item_name_grey">所属网段：</span>
												<span class="areaAbout_item_name_black">{{areaAboutItem.segmentName}}</span>
											</p>
									</li>
									<li class="area_bottom_item_li" >
											<p >
											<span class="areaAbout_item_name_grey">CPU：</span>
											<span class="areaAbout_item_name_num">
												<!--<span class="auto_areaAbout_item_name_num" :style="{width: areaAboutbottomItem.num}">50%</span>-->
												{{areaAboutItem.cpuNum}}核
											</span>
										</p>
									</li>
									<li class="area_bottom_item_li" >
											<p >
											<span class="areaAbout_item_name_grey">内存：</span>
											<span class="areaAbout_item_name_num">
												<!--<span class="auto_areaAbout_item_name_num" :style="{width: areaAboutbottomItem.num}">50%</span>-->
												{{areaAboutItem.memory}}G
											</span>
										</p>
									</li>
									<li class="area_bottom_item_li" >
											<p >
											<span class="areaAbout_item_name_grey">硬盘：</span>
											<span class="areaAbout_item_name_num">
												<!--<span class="auto_areaAbout_item_name_num" :style="{width: areaAboutbottomItem.num}">50%</span>-->
												{{areaAboutItem.diskSize}}G
											</span>
										</p>
									</li>
									<li class="area_bottom_item_li" >
											<p >
												<span class="areaAbout_item_name_grey">Docker容器：</span>
												<span class="areaAbout_item_name_black">没有</span>
											</p>
									</li>
									<li class="area_bottom_item_li" >
											<p >
												<span class="areaAbout_item_name_grey">共享服务：</span>
												<span class="areaAbout_item_name_black">{{areaAboutItem.gxCount}}</span>
											</p>
									</li>
									<li class="area_bottom_item_li" >
											<p >
												<span class="areaAbout_item_name_grey">采集服务：</span>
												<span class="areaAbout_item_name_black">{{areaAboutItem.cjCount}}</span>
											</p>
									</li>
									<li class="area_bottom_item_li" >
											<p >
												<span class="areaAbout_item_name_grey">通道数量：</span>
												<span class="areaAbout_item_name_black">{{areaAboutItem.tdCount}}</span>
											</p>
									</li>
									
								</ul>
							</div>
						</div>
					</el-carousel-item>
			</el-carousel>
		
	</div>
	</section>

    
    
</template>

<script>
    import {
    	computedGetAreaGaishu,
    	computedPostAreaGaishu,
    	computedAreaAreaTopu
    } from "../css_js_img/computedareaResource"
    export default {
        data() {
          return {
          		area_about_bottom_page:{
					pageNum:1,
					pageSize:10
				},
				arae_topu_page:{
					pageNum:1,
					pageSize:4
				},
				arae_topu_length:0,
          		area_about_bottom_length:0,
          		tuopuItem:[
          			{
          				name:'区域1',
          				tongdao:[
          					{
          						name:'通道1',
          						tong:true
          					},
          					{
          						name:'通道1',
          						tong:true
          					},
          					{
          						name:'通道1',
          						tong:true
          					},
          					{
          						name:'通道1',
          						tong:true
          					},
										
          				],
          			},
          		],
          		allGaishu:[
	          		{
	          			name:'总通道数',
	          			num:0
	          		},
	          		{
	          			name:'异常服务数',
	          			num:0
	          		},
	          		{
	          			name:'网段',
	          			num:0
	          		},
	          		{
	          			name:'区域',
	          			num:0
	          		},
	          		{
	          			name:'服务总数',
	          			num:0
	          		},
	          		{
	          			name:'运行服务（总数）',
	          			num:0
	          		},
	          		{
	          			name:'共享服务',
	          			num:0
	          		},
	          		{
	          			name:'运行服务（共享）',
	          			num:0
	          		},
	          		{
	          			name:'采集服务',
	          			num:0
	          		},
	          		{
	          			name:'运行服务（采集）',
	          			num:0
	          		},
          		],
          		areaAboutBottom:[],
          };
        },
        methods: {
        		pushDetail(item){/*去detail的页面*/
        			console.log(item);
        			this.$emit("addTab",{title:'区域详情',id:item.id,type:"detail"});
        		},
        		changeCarousel(index,oldIndex){/*转动幻灯片*/
        			this.area_about_bottom_page.pageNum=Number(index)+1;
        			computedPostAreaGaishu(this);
        		},
        		changeTopu(index,oldIndex){
        			this.arae_topu_page.pageNum=Number(index)+1;
        			computedAreaAreaTopu(this);
        		}
        },
        mounted(){
        	computedGetAreaGaishu(this);
        	computedPostAreaGaishu(this);
        	computedAreaAreaTopu(this);
        	
        }
  };
</script>

<style scoped="scoped">
	.area_area_gai_shu{
		/*margin-top: 15px;*/
		background: #f0f0f0;
		border-top: solid 15px #F0F0F0;
	}
	.area_area_gai_shu_first{
		background: #fff
	}
    .p_tuopu{
			font-size: 18px;
			font-weight: 600;
			padding-left: 20px;
		}
		.green{
			background: #25c525;

		}
		.red{
			background: #c52525;

		}
		.blue{
			    width: 3px;
			    height: 18px;
			    background: #2576C5;
			    display: inline-block;
			    vertical-align: middle;
			    margin-right: 3px;
		}
		.tup_pu_pic{
			min-height: 392px;
			background: #fff;
			    padding-top: 20px;
		}
		.show_span{
			display: inline-block;
			width: 20px;
			border-radius: 4px;
			height: 4px;
			vertical-align: middle;
			margin: 0 15px;
		}
		.show_data{
			width: 100%;
			text-align: center;
		}
		.tuo_pu_zhuji{
			width: 65px;
		}
		.manage_center{
			font-size: 15px;
		}
		.toupu_item{
			border: solid 1px #D2D2D2;
			min-height: 150px;
			border-radius: 5px;
		}
		.item_name{
			font-size: 16px;
			color: #2576c5;
			margin: 10px;
		}
		.tongdao_item{
			margin: 7px 0;
		}
		
	/********总体概述******/	
		.all_gaishu{
			height: 392px;
			/*background: blue;*/
			padding-top: 20px;
		}
		.all_gaishu_item{
			    display: inline-block;
			    width: 20%;
			    text-align: center;
			    height: 150px;
		}
		.all_gaishu_item_name{
			font-size: 14px;
		}
		.all_gaishu_item_num{
			color: #2576c5;
			font-size: 23px;
		}
		/***********区域概述*********/
		.area_about_bottom{
			height: 388px;
			background: #fff;
		    padding-top: 10px;
		    margin-top: 15px;
		}
		.areaAbout_contenc{
			width: 20%;
			height: 300px;
			/*background: orange;*/
			display: inline-block;
			box-sizing: border-box;
			padding: 0 10px;
			vertical-align: top;
		}
		.areaAbout_item{
			height: 300px;
			border: solid 1px #F0F0F0;
			border-radius: 4px;
			cursor: pointer;
		}
		.area_bottom_carousel{
			width: 90%;
		    margin: 0px auto;
		    position: absolute;
		    top: 0px;
		    left: 0;
		    right: 0;
		    bottom: 0;
		}
		.area_bottom_carousel_content{
			margin-top: 30px;
		}
		.areaAbout_item_name{
			text-align: center;
		    font-size: 16px;
		    color: #2576c5;
		    margin: 15px;
		}
		.area_bottom_item_li{
			padding: 0 15px;
		    font-size: 14px;
		    margin: 10px 0;
		}
		span.areaAbout_item_name_grey {
		    color: #787878;
		}
		span.areaAbout_item_name_black {
		    color: #333333;
		}
		span.areaAbout_item_name_num {
		    width: calc(100% - 50px);
		    background: #BDBDBD;
		    display: inline-block;
		    border-radius: 50px;
		        text-align: right;
    		padding-right: 10px;
    		position: relative;
		}
		span.auto_areaAbout_item_name_num{
			background: #2576C5;
    		border-radius: 50px;
    		display: inline-block;
    		text-align: right;
		    padding-right: 10px;
		    color: #fff;
		        position: absolute;
    		left: 0;
		}
		
</style>